@import './variables.less';
@import '../../style/mixins.less';

.fnx-tabs {
	&__header {
		overflow: hidden;
	}

	&__nav {
		display: flex;
		position: relative;
		background-color: var(--fnx-tabs-nav-background-color);
	}

	&__nav-left,
	&__nav-right {
		flex: none;
	}

	&__nav-item {
		position: relative;
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 var(--fnx-padding-base);
		color: var(--fnx-tabs-nav-item-text-color);
		font-size: var(--fnx-tabs-nav-item-font-size);
		line-height: var(--fnx-tabs-nav-item-line-height);
		cursor: pointer;

		&--active {
			color: var(--fnx-tabs-nav-item-active-text-color);
			font-weight: var(--fnx-font-weight-bold);
		}

		&--disabled {
			color: var(--fnx-tabs-nav-item-disabled-text-color);
			cursor: not-allowed;
		}
	}

	&__nav-item-title {
		&--ellipsis {
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}
	}

	&__nav-list {
		flex: auto;
		box-sizing: content-box;
		height: var(--fnx-tabs-nav-list-height);
		padding-bottom: 15px; /* 15px padding to hide scrollbar in mobile safari */
		position: relative;
		display: flex;
		user-select: none;

		&--scrollable {
			padding-right: var(--fnx-padding-xs);
			padding-left: var(--fnx-padding-xs);
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;

			&::-webkit-scrollbar {
				display: none;
			}

			.fnx-tabs__nav-item {
				flex: 1 0 auto;
				padding: 0 var(--fnx-padding-sm);
			}
		}
	}

	&__nav-track {
		position: absolute;
		bottom: 15px;
		left: 0;
		z-index: 1;
		width: var(--fnx-tabs-nav-track-width);
		height: var(--fnx-tabs-nav-track-height);
		background-color: var(--fnx-tabs-nav-track-color);
		border-radius: var(--fnx-tabs-nav-track-height);
		will-change: left;
		transform: translateX(-50%);
	}

	&__content {
		&--animated {
			overflow: hidden;
		}
	}

	&__panel {
		box-sizing: border-box;
		width: 100%;
	}
}
